import React, { Component } from "react";
import Modal from 'bee-modal';
import 'bee-modal/build/Modal.css';
import Table from "bee-table";
import 'bee-table/build/Table.css';
import { Button, FormControl } from "tinper-bee";
import './acceptModal.less';
import { vendorsDanger, vendorsFmtDate } from 'utils/config.js';
import { queryReceiveDetailById } from './workConnect.config';


export default class AcceptModal extends Component {
    constructor(props) {
        super(props);
        let _me = this;
        this.state = {
            suggestion: '',
            length: 0,
            workConReceiverVOS: [],
        }
        this.columns = [
            {
                title: "序号", dataIndex: "index", key: "index", width: '10%',
                render(text, record, index) {
                    return <span>{index + 1}</span>
                }
            },
            { title: "接受人", dataIndex: "receiverName", key: "receiverName", width: '15%' },
            {
                title: "接收状态", dataIndex: "receiveStatus", key: "receiveStatus", width: '15%',
                render(text, record, index) {
                    return <span>{text == 1 ? '未接收' : '已接收'}</span>
                }
            },
            {
                title: "接收时间", dataIndex: "receivedTime", key: "receivedTime", width: '15%',
                render(text, record, index) {
                    return text && <span>{vendorsFmtDate(text)}</span>
                }
            },
            {
                title: "接收意见", dataIndex: "suggestion", key: "suggestion", width: '45%',
            }
        ];
    }

    onSubmit = () => {
        this.props.onSubmit(this.state.suggestion);
    }

    setItemValue = (e) => {
        let value = e.target.value;
        if(value && value.length>300){
            value = value.substr(0,300);
        }
        this.setState({
            suggestion: value,
            length: value.length,
        })
    }
    componentDidUpdate = (prevProps, prevState) => {
        let { isShow, pk_workconnect, modalType } = this.props;
        if (!prevProps.isShow && isShow && modalType == 'detail') {
            queryReceiveDetailById.call(this.props.parent, {
                pk_workconnect
            }, (res) => {
                if (res.data.resultCode == 'ok') {
                    this.setState({
                        workConReceiverVOS: res.data.result.workConReceiverVOS,
                    })
                }

            })
        } else if (prevProps.isShow && !isShow) {
            this.setState({
                suggestion: '',
                length: 0,
                workConReceiverVOS: [],
            })
        }
    }
    render() {
        let {
            suggestion,
            length,
            workConReceiverVOS,
        } = this.state;
        return (
            <Modal className='ygc-gzlx-accept-modal' show={this.props.isShow} size={'lg'} onHide={this.props.onClose} backdrop={false}>
                <Modal.Header className='ygc-gzlx-accept-header' closeButton>
                    <Modal.Title > {'接收意见'} </Modal.Title>
                </Modal.Header >
                <Modal.Body>
                    {
                        this.props.modalType == 'detail' ?
                            <div>
                                <Table
                                    className='accept-detail-table'
                                    columns={this.columns}
                                    data={workConReceiverVOS}
                                    emptyText={() => '暂无数据'}
                                    rowKey='pkWorkConReceiver'
                                    scroll={{ y: 460 }}
                                // bordered
                                />
                            </div>
                            :
                            <div className='suggestion-container'>
                                <FormControl
                                    className={'accept-input-textarea'}
                                    placeholder={`请输入接收意见`}
                                    value={suggestion}
                                    onChange={this.setItemValue}
                                    componentClass='textarea'
                                />
                                <div className='accept-input-words-left'>{length}/300</div>
                            </div>
                    }
                </Modal.Body>
                {
                    this.props.modalType != 'detail' &&
                    <Modal.Footer>
                        <div className="refer-btn-group">
                            <Button className='icon-cancel-btn' onClick={this.props.onClose}> 取消 </Button>
                            <Button colors="primary" onClick={this.onSubmit}> 接收 </Button>
                        </div>
                    </Modal.Footer>
                }
            </Modal>
        )
    }

}